<template>
	<view style="background-color: #FBFBFB;">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">{{project.projectName}}</block></cu-custom>
		
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="propertyBox">
				<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in modules" :key="index" @tap="tabSelect" :data-id="index">
					{{item.moduleName}}
				</view>
				<text class="cuIcon-add " style="background-color: white;font-size: 20px;padding: 8px;display: flex;align-items: center;" @tap="showModal" data-target="bottomModal"></text>
			</view>
		</scroll-view>
		<view class="" style="width: 96%;margin: auto; display: flex; justify-content: center; align-items: center;background-color: #eeeeee;border-radius: 8px;margin-top: 10px;">
		    <swiper :current="currentIndex" @change="swiperChange" class="swiper" style="margin: 20px;margin-right: 20px;">
		      <swiper-item v-for="(item, index) in cards" :key="index" style="overflow: auto; margin: 5px;" v-if="cards">
		        <view class="card">
					  <view class="card-title" style="display: flex; justify-content: center; align-items: center;">
					    <text>{{ item.cardName }}</text>
					    <text class="cuIcon-title" style="margin-left: 5px;"></text>
					    <text style="margin-left: 5px;">{{!item.completeTask ? "0" : item.completeTask}}/{{!item.totalTask ? "0" : item.totalTask}}</text>
					    <text class="cuIcon-add" style="font-size: 20px; padding: 8px;margin-left: auto;" @tap="addTask"></text>
					    <text class="cuIcon-more" style="font-size: 15px; padding: 8px;" @tap="showModalDetail" data-target="bottomMore"></text>
					  </view>
		        </view>
				<view class="content" style="background-color: white;border-radius: 8px;margin-top: 10px;margin-right: 10px;" v-for="c in item.taskList" @click="getTaskDetail(c)">
					<view class="right" :style="{ 'border-left': `5px solid ${getColorByLevel(c.taskLevel)}` }" style="border-radius: 8px;">
						<view class="l1" :class="{ 'strikethrough': c.states }" style="margin: 10px;">
							{{c.taskName}}{{c.states ? " (已完成)" : ""}}
						</view>
						<view class="l2" style="margin: 10px;margin-left: 20px;display: flex;justify-items: center;font-size: 12px;">
							<text class="cuIcon-calendar" style="padding: 3px;"></text>
							<text :style="{ color: calculateDifference(c.endTime, nowDate) != -1?'red':'' }"> {{c.startTime}} - {{c.endTime}}</text>
							<l-circle :percent="parseFloat(c.taskProgress)" size="20px" style="margin-left: 10px;"></l-circle>
							<text class="" style="margin-left: 5px;"> {{c.taskProgress}}%</text>
						</view>
						<view class="l3" style="margin: 10px;margin-left: 20px;font-size: 12px;">
							负责人：{{c.staff.name}}
						</view>
					</view>
				</view>
		      </swiper-item>
			  <swiper-item style="overflow: auto; margin: 5px;">
				  <view v-if="cardShow" style="margin: 10px;">
					<button @click="addCard"><text class="cuIcon-roundaddfill" ></text>新建卡片</button>
				  </view>
				  <view class="container" v-if="!cardShow" style="width: auto;background-color: #FBFBFB;margin: 10px;">
					  <view class="" style="width: auto; display: flex; justify-content: center; align-items: center;">
					    <input placeholder="请输入卡片名称" v-model="cardName" style="border: 1px solid black; width: 90%;margin: 10px;">
					  </view>
					 <view class="containerButton" style="display: flex; justify-content: flex-end; margin: 10px;">
					   <button @click="cancelCardShow" style="font-size: 15px;margin-right: unset;margin-left: unset;">取消</button>
					   <button @click="submitCardShow" style="font-size: 15px; background-color: cornflowerblue;margin-right: unset;margin-left: 20px;">创建</button>
					 </view>
				  </view>
			  </swiper-item>
		    </swiper>
		</view>
		
		<!-- 底部模块添加 -->
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" >
			<view class="cu-dialog" style="border-radius: 8px;">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">取消</view>
					<view class="action text-green" @click="addOneModule">确定</view>
				</view>
				<view class="padding-xl" >
					<view class="cu-form-group" style="border-radius: 8px;">
						<input placeholder="请输入模块名称" name="name" v-model="moduleName" ></input>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 模块更多弹框 -->
		<view class="cu-modal bottom-modal" :class="modalName=='bottomMore'?'show':''" style="z-index: 1;">
			<view class="cu-dialog" style="border-radius: 8px;background-color: #eeeeee;">
				<view @click="updateModelName" style="min-height: 50px;display: flex;justify-content: center;align-items: center;background-color: #FBFBFB;border-bottom: 1px solid #eeeeee;">
					修改模块名称
				</view>
				<view @click="delModule" style="min-height: 50px;display: flex;justify-content: center;align-items: center;background-color: #FBFBFB;border-bottom: 1px solid #eeeeee;">
					删除模块
				</view>
				<view @click="updateCardName" style="min-height: 50px;display: flex;justify-content: center;align-items: center;background-color: #FBFBFB;border-bottom: 1px solid #eeeeee;">
					修改卡片名称
				</view>
				<view @click="delCard" style="min-height: 50px;display: flex;justify-content: center;align-items: center;margin-bottom: 10px;background-color: #FBFBFB;">
					删除卡片
				</view>
				<view @tap="hideModal" style="min-height: 50px;display: flex;justify-content: center;align-items: center;background-color: #FBFBFB;">
					取消
				</view>
			</view>
		</view>
		
		<!-- 修改卡片名称 -->
		<uni-popup ref="dialogInput" type="dialog">
			<view class="contentUp">
				<view class="tips" style="display: flex;justify-content: center;align-items: center;padding-top: 20px;">修改卡片名称</view>
				<input class="input" type="text" placeholder="请输入要修改的名称" v-model="areaTxt" style="margin-left: 20px;"/>
				
				<view style="display: flex; justify-content: space-between;">
				  <text class="button" @click="closeUpdateCard()" style="margin-top: 10px;border-right: 1px solid gainsboro;border-radius: 0 0 0 8px;border-top: 1px solid gainsboro;">取消</text>
				  <text class="button" @click="confirmAdd()" style="margin-top: 10px;border-top: 1px solid gainsboro;border-radius: 0 0 8px 0;">确定</text>
				</view>
			</view>
		</uni-popup>
		
		<!-- 修改模块名称 -->
		<uni-popup ref="modelInput" type="dialog">
			<view class="contentUp">
				<view class="tips" style="display: flex;justify-content: center;align-items: center;padding-top: 20px;">修改模块名称</view>
				<input class="input" type="text" placeholder="请输入要修改的名称" v-model="moduleText" style="margin-left: 20px;"/>
				<view style="display: flex; justify-content: space-between;">
				  <text class="button" @click="closeUpdateModel()" style="margin-top: 10px;border-right: 1px solid gainsboro;border-radius: 0 0 0 8px;border-top: 1px solid gainsboro;">取消</text>
				  <text class="button" @click="moduleComfirm()" style="margin-top: 10px;border-top: 1px solid gainsboro;border-radius: 0 0 8px 0;">确定</text>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import request from '../../common/request';
	import common from 'common/common.js';
	import uniPopup  from 'uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	export default {
		components: { 
			'uni-popup': uniPopup,
		},
		data() { 
			return {
				talentName:'',
				// 模块信息修改
				moduleText:'',
				// 卡片信息修改
				areaShow:false,
				areaTxt:'',

				// 卡片添加
				cardShow: true,
				cardName: null,
				// 模块添加
				modalName: null,
				moduleName: null,
				
				// 文字删除线
				isStrikethrough: false,
				// 滑动卡片
				currentIndex: 0,
				
				// 滑动导航栏
				TabCur: 0,
				scrollLeft: 0,
				
				// 今天时间
				nowDate:'',
				nowTime: '',
				
				projectId: '',
				project: {},
				modules: [],
				cards: {},
				card: {},
				module:{},
				moduleId: '',
			}
		},
		// 从上个页面获取数据
		onLoad(options){
			// this.cardId = options.cardId
			// this.moduleId = options.moduleId
			this.projectId = options.projectId
		    // this.task = JSON.parse(decodeURIComponent(options.task));
			this.getProjectById();
		},
		onShow() {
			this.getProjectById();
		},
	methods: {
		// 根据 任务的级别展示不同颜色
		getColorByLevel(taskLevel) {
		  // 根据 level 返回对应的颜色
		  switch (taskLevel) {
			case "最高":
				return 'red';
			case "较高":
				return 'orange';
			case "一般":
				return 'purple';
			case "普通":
				return 'green';
			default:
			  return 'black';
		  }
		},
		// 取消卡片修改
		cancelAdd(){
			this.areaShow = false
		},
		// 确认修改模块
		moduleComfirm(){
			this.module.moduleName = this.moduleText;
			var _this = this;
			request({
				url: common.api_base_url+'/module',
				data:{
					"module": _this.module
				},
				header:{
				},
				method: 'PUT',
				success: res => {
					_this.getProjectById()
					uni.showToast({
						title: res.data.message,
						duration: 2000,
						icon:"success"
					})
				},
				fail: function(e) {
					uni.showToast({
						title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
						icon:"loading"
					})
				},
			});
		},
		// 确认卡片修改
		confirmAdd(talentName){
			this.card.cardName = this.areaTxt;
			var _this = this;
			request({
				url: common.api_base_url+'/okrcard',
				data:{
					"card": _this.card
				},
				header:{
				},
				method: 'PUT',
				success: res => {
					_this.getProjectById()
					uni.showToast({
						title: res.data.message,
						duration: 2000,
						icon:"success"
					})
				},
				fail: function(e) {
					uni.showToast({
						title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
						icon:"loading"
					})
				},
			});
			this.areaShow = false;
		},
		// 删除模块
		delModule(){
			this.modalName = null
			console.log(this.module)
			if(!this.module.id){
				this.module = this.modules[0];
			}
			let _this = this;
			uni.showModal({
				title: '删除模块',
				content: '您确定要删除这个模块吗？',
				success: function (res) {
					if (res.confirm) {
						request({
							url: common.api_base_url+'/module/' + _this.module.id,
							data:{
							},
							header:{
							},
							method: 'DELETE',
							success: res => {
								_this.getProjectById();
							},
							fail: function(e) {
								uni.showToast({
									title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
									icon:"loading"
								})
							},
						});
					} else if (res.cancel) {
						res.cancel = true;
					}
				}
			});
		},
		// 卡片删除
		delCard(){
			this.modalName = null
			let _this = this;
			uni.showModal({
				title: '删除卡片',
				content: '您确定要删除这张卡片吗？',
				success: function (res) {
					if (res.confirm) {
						request({
							url: common.api_base_url+'/okrcard/' + _this.card.id,
							data:{
							},
							header:{
							},
							method: 'DELETE',
							success: res => {
								_this.getProjectById();
							},
							fail: function(e) {
								uni.showToast({
									title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
									icon:"loading"
								})
							},
						});
					} else if (res.cancel) {
						res.cancel = true;
					}
				}
			});
		},
		closeUpdateCard(){
			this.$refs.dialogInput.close() //和下面写法一样效果
		},
		closeUpdateModel(){
			this.$refs.modelInput.close() //和下面写法一样效果
		},
		// 弹出卡片修改框
		updateCardName(){
			this.modalName = null
			console.log(this.card.cardName)
			if(this.card.cardName){
				this.areaTxt= this.card.cardName;
			} else{
				this.areaTxt = this.cards[0].cardName;
			}
			// this.areaTxt= this.card.cardName;
			this.$refs.dialogInput.open() //和下面写法一样效果
		},
		// 弹出模块修改框
		updateModelName(){
			this.modalName = null
			console.log(this.module.moduleName)
			if(this.module.moduleName){
				this.moduleText= this.module.moduleName;
			} else{
				this.moduleText = this.modules[0].moduleName;
			}
			this.$refs.modelInput.open() //和下面写法一样效果
		},
		__e(){},
		// 从卡片中添加任务，页面跳转到任务添加
		addTask(){
			if(!this.card.id){
				this.card = this.cards[0];
			}
			uni.navigateTo({
			       url: `/pages/addTask/addTask?data=${JSON.stringify(this.card)}`,
			     });
		},
		// 确定卡片添加
		submitCardShow(){
			console.log(this.module)
			if(!this.module.id){
				this.module = this.modules[0]
			}
			var card = {
				"moduleId": this.module.id,
				"cardName": this.cardName,
				"projectId": this.module.projectId,
			}
			var _this = this;
			request({
				url: common.api_base_url+'/okrcard',
				data:{
					"card": card
				},
				header:{
				},
				method: 'PUT',
				success: res => {
						// uni.showToast({
						// 	title:"添加成功",
						// 	duration: 1000
						// })
					_this.cardShow = !this.cardShow;
					_this.getProjectById();
					_this.cardName = null;
				},
				fail: function(e) {
					uni.showToast({
						title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
						icon:"loading"
					})
				},
			});
			
		},
		// 取消卡片添加框
		cancelCardShow(){
			this.cardShow = !this.cardShow;
		},
		// 卡片添加框显示
		addCard(){
			this.cardShow = !this.cardShow;
		},
		// 添加模块的底部弹出框
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target
		},
		// 添加模块的底部弹出框
		showModalDetail(e) {
			this.modalName = e.currentTarget.dataset.target
		},
		hideModal(e) {
			this.modalName = null
		},
		// 添加新模块
		addOneModule(){
			var module = {
				projectId : this.projectId,
				moduleName : this.moduleName,
			}
			if(!module.moduleName){
				uni.showToast({
					title: "模块名不能为空",
					duration: 2000,
					icon:"error"
				})
			}
			var _this = this;
			request({
				url: common.api_base_url+'/module',
				data:{
					"module": module
				},
				header:{
				},
				method: 'PUT',
				success: res => {
					if(res.data.success){
						_this.moduleName = null;
						_this.modalName = null;
						_this.getProjectById();
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon:"error"
						})
					}
				},
				fail: function(e) {
					uni.showToast({
						title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
						icon:"loading"
					})
				},
				
			});
			
		},
	
		// 滑动卡片切换事件
		 swiperChange(event) {
			  // 当滑动卡片切换时触发的事件，可以在这里添加自定义逻辑
			  this.currentIndex = event.detail.current;
			  this.card = this.cards[this.currentIndex];
			},
			
		// 页面跳转，获取任务详细
		getTaskDetail(task){
			this.task = task;
			uni.navigateTo({
				// url: `/pages/showList/taskDetail?id=${this.task.id}`,
				url:'/pages/showList/taskDetail?task='+ encodeURIComponent(JSON.stringify(this.task)),
			})
			// uni.navigateTo({
			// 	url:'/pages/showList/taskDetail?task='+ encodeURIComponent(JSON.stringify(this.task)),
			// })
		},
		
		// 任务完成勾选框
		completeTask(task){
			task.states = !task.states;
			this.moduleId = task.moduleId;
			var _this = this;
			request({
				url: common.api_base_url+'/task/changeStates',
				data:{
					"task": task
				},
				header:{
				},
				method: 'PUT',
				success: res => {
					if(res.data.success){
						_this.getProjectById();
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon:"error"
						})
					}
				},
				fail: function(e) {
					uni.showToast({
						title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
						icon:"loading"
					})
				},
			});
		},
		
		//  滑动导航栏选择按钮
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			this.module = this.modules[this.TabCur];
			this.moduleId = this.module.id;
			this.getProjectById();
			// this.currentIndex = 0;
		},
		// 添加module
		addModule() {
		  // 添加新项目
		  const newItem = { text: "New Item", selected: false };
		  this.items.push(newItem);
		},
		// 获取单个project数据
		getProjectById(){
			var ids = {
				"projectId": this.projectId,
				"moduleId": this.moduleId,
			}
			var _this = this;
			request({
				url: common.api_base_url+'/okrproject/getDetaile' ,
				data:{
					"ids":ids,
				},
				header:{
				},
				method: 'POST',
				success: res => {
					const {okrproject, modules, okrcards} =res.data;
					_this.project = okrproject;
					_this.modules = modules;
					_this.cards = okrcards;
					// _this.module = modules[0];
					// _this.card = okrcards[0];
				},
				fail: function(e) {
					uni.showToast({
						title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
						icon:"loading"
					})
				},
			});
		},
		// 时间转换格式方法
		formatDate(date) {
		  const year = date.getFullYear();
		  const month = String(date.getMonth() + 1).padStart(2, '0');
		  const day = String(date.getDate()).padStart(2, '0');
		  return `${year}-${month}-${day}`;
		},
		// 计算两个时间差值
		calculateDifference(endTime, nowDate) {
			  
			var endTime = new Date(endTime);
			var nowDate = new Date(nowDate);
			
			if(nowDate <= endTime){
				roundedDiffDays = -1;
			} else{
				// 计算日期差值（以天为单位）  
				var diffDays = Math.abs(nowDate - endTime) / (1000 * 3600 * 24);
				// 使用Math.ceil()函数向上取整
				var roundedDiffDays = Math.ceil(diffDays);
			}
			// 返回时间差值
			return roundedDiffDays;
		}
	},
		created() {
		    // 在组件创建时，为 nowTime 设置当前日期
		    const currentDate = new Date();
		    this.nowTime = this.formatDate(currentDate);
		    this.nowDate = this.formatDate(currentDate);
		}
	}
</script>

<style lang="scss">
	
/* 轮播卡片样式 */
.swiper {
  width: 100%;
  height: 80vh;
  margin: auto; 
  display: flex;
  justify-content: center;
  align-items: center;
}
  // height: 400px;

.card {
  // width: 90%;
  // margin: 5px auto;
  // padding: 10px;
  // background-color: #fff;
  border-radius: 8px;
  // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


.card-image {
  width: 100%;
  height: 200px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  // margin-top: 8px;
  // margin-bottom: 8px;
}

.card-description {
  margin-top: 10px;
  color: #666;
}
/* 文字删除线样式 */
.strikethrough {
  text-decoration: line-through;
  color: #666;
}

/* 展示任务样式 */
.content{
	min-height: 50px;
	display: flex;
	flex-direction: row;
	background-color: #999999;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	// padding: 20rpx 30rpx;
	// justify-content: space-between;
	// .left1{
	// 	background-color: #FFFFFF;
	// 	width: 2%;
	// }
	// .left{
	// 	background-color: #FFFFFF;
	// 	border: none;
	// }
	// .right{
	// 	display: flex;
	// 	flex-direction: column;
	// 	justify-content: space-between;
	// 	width: 90%;
	// 	background-color: #FFFFFF;
	// 	.l1{
	// 		background-color: #FFFFFF;
	// 		// width: 100%;
	// 		height: 40rpx;
	// 		margin-left: 8px;
	// 		margin-top: 8px;
	// 	}
	// 	.l2{
	// 		background-color: #FFFFFF;
	// 		// width: 100%;
	// 		height: 40rpx;
	// 		margin: 5px;
	// 	}
	// 	.l3{
	// 		background-color: #FFFFFF;
	// 		// width: 100%;
	// 		height: 40rpx;
	// 		margin-left: 8px;
	// 		margin-bottom: 8px;
	// 	}
	// }
}
/* 固定头部 */
.fixed-row {  
  position: sticky;  
  top: 0;  
  background-color: #f8f8f8; // 可根据需要设置背景色  
  z-index: 999; /* 设置一个较高的z-index值 */
}  


/* 导航栏固定一行 */
.propertyBox{
		flex-flow: row;
		justify-content: flex-start;
		display: flex;
	}
/* 卡片添加框样式 */
.container{
		/* 定义flex容器 */
		display: flex;
         /*设置容器内部容器的排列方向*/	
		flex-direction: column; 
	}
.containerButton{
		/* 定义flex容器 */
		display: flex;
         /*设置容器内部容器的排列方向*/	
		flex-direction: row; 
		justify-content: flex-end;
	}
	
	
	.contentUp {
		width: 484rpx;
		// height: 426rpx;
		height: auto;
		border-radius: 16rpx;
		// padding: 30rpx;
		background-color: #FFFFFF;
		align-items: center;
	}
 
	.tips {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
 
	.input {
		width: 400rpx;
		height: 70rpx;
		margin-top: 52rpx;
		border-radius: 10rpx;
		background-color: #FBFBFB;
		font-size: 26rpx;
		padding: 10rpx;
		border: 1rpx solid #D3D3D3;
	}
 
	.button {
		background: linear-gradient(to right, #ffffff, #ffffff);
		width: 400rpx;
		height: 70rpx;
		// color: #FFFFFF;
		margin-top: 82rpx;
		border-radius: 36rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 30rpx;
	}
	
	.button-container {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  // background-color: #fff;
	  // padding: 10px; /* 可根据需要设置内边距 */
	  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1); /* 可根据需要添加阴影 */
	}
	
</style> 
